<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
	
			   <!--    v-model其实是一个语法糖，它的背后本质上是包含两个操作：
				                1.v-bind绑定一个value属性
				                2.v-on指令给当前元素绑定input事件 -->
				            v-model<input type="text" v-model="message">{{message}}<br>
				            等同于
				            <!--当你触发input事件时，$event 是当前的事件对象($event是指当前触发的是什么事件)。
				                 $event.target.value指向的是当前的input的值。
				-->

					<!--target表示当前整个标签，包括标签里面的属性-->
					<!--:value 一旦vue实例中的数据发生改动就会同步到这个input框中-->
					<!--@input 一旦手动修改文本框的内容就会把vue实例中的 数据发生改动-->
			<input type="text" name="" id="" :value="message" @input="message = $event.target"/>{{message}}<br>
			<hr/>



			            <!-- 2.用法二：绑定textarea元素 -->
			            textarea<textarea v-model="message"></textarea><br>
			            <p>输入的内容是{{message}}</p>

	</div>

		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					message: 'hello'
				},
				methods:{
					valueChange(event){
						console.log(event);
						this.message=event.target.value;
					},
					text1(event){
						console.log(event.target.value);
					}
				}
			});
		</script>
	</body>
</html>
